<template>
  <div class="app-container home">
    <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" style="padding-left: 20px">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>我的课程</span>
            </div>
            <div class="body">
              <el-table v-loading="loading" :data="courseVOList">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="id" align="center" prop="id" />
                <el-table-column label="班级名称" prop="clazzName" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="课程名称" prop="courseName" :show-overflow-tooltip="true"  width="120" />
                <!-- <el-table-column label="课程码" prop="clazzName" :show-overflow-tooltip="true" width="150" /> -->
                <!-- <el-table-column label="状态" align="center" width="100"> -->
                  <!-- <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column> -->
                <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="startLesson(scope.row)"
                  
                    >开始上课</el-button>
              
                  </template>
                </el-table-column>
              </el-table>
           
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" style="padding-left: 20px">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>正在上的课</span>
            </div>
            <div class="body">
              <el-table v-loading="loading" :data="lessonList">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="id" align="center" prop="id" />
                <el-table-column label="课名字" prop="name" :show-overflow-tooltip="true" width="200" />
                <el-table-column label="教师" prop="teacherName" :show-overflow-tooltip="true"  width="120" />
                <!-- <el-table-column label="课程码" prop="clazzName" :show-overflow-tooltip="true" width="150" /> -->
                <!-- <el-table-column label="状态" align="center" width="100"> -->
                  <!-- <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column> -->
                <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="goLesson(scope.row)"
                  
                    >继续上课</el-button>
              
                  </template>
                </el-table-column>
              </el-table>
           
            </div>
          </el-card>
        </el-col>
    
    </el-row>
  </div>
</template>

<script>
import { listTeacherInfo} from "@/api/feedback/info";
import { startLesson,goLesson} from "@/api/feedback/lesson";

export default {
  name: "Index",
  data() {
    return {
    
      // 遮罩层
      loading: false,
      // 班级码
      clazz_code: "",

      courseVOList:[],
      lessonList:[],
    };
  },
  created(){
    this.getTeacherInfo();
  },
 
  methods: {
    getTeacherInfo(){
      this.loading = true;

      listTeacherInfo().then(res => {
        this.courseVOList = res.data.courseVOList;
        this.lessonList = res.data.lessonList;
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      });
    },
    startLesson(row) {
      const ids = row.id ;
      startLesson(ids).then((res) => {
        
        this.$router.push("/feedback/lesson/teacher/" + res.data.id);
      }).catch(() => {});
    },
    goLesson(row) {
      const ids = row.id ;
      goLesson(ids).then((res) => {
        this.$router.push("/feedback/lesson/teacher/" + res.data.id);
      }).catch(() => {});
    },
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

